<template>
  <Card style="height:800px">
    <header>
      <span>还款计算方式:</span>
      <Select v-model="amortCode" style="width:200px">
        <Option v-for="item in paymentData" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Button type="primary" @click="queryPage" style="margin-left: 10px;">查询</Button>
      <Button type="primary" @click="addItem();" style="margin-left: 10px;">新建</Button>
    </header>
    <Content style="margin-top:20px;">
      <Table border :columns="columns1" :data="data1"></Table>
    </Content>
    <Modal v-model="turnOut" title="新增" @on-ok="hold" @on-cancel="cancel" :mask-closable="mask" width="800" :footer-hide="true"  ok-text="保存">
      <div>
        <div style="width:500px;margin:0px auto">
          <Row type="flex" align="middle">
            <Col span="8">机构:</Col>
            <Col span="14">
            <Select v-model="formDatas.organization" style="width: 300px;">
              <Option v-for="item in orgList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
          </Row>
          </br>
          <Row type="flex" align="middle">
            <Col span="8">描述:</Col>
            <Col span="14">
            <Input v-model="formDatas.description" style="width: 300px;" placeholder="请输入"></Input>
            </Col>
          </Row>
          </br>
          <Row type="flex" align="middle">
            <Col span="8">还款计算方式:</Col>
            <Col span="14">
            <Select v-model="formDatas.amortCode" style="width: 300px;">
              <Option v-for="item in amortCodeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
          </Row>
          </br>
          <Row type="flex" align="middle">
            <Col span="8">进位方法:</Col>
            <Col span="14">
            <Select v-model="formDatas.roundUp" style="width: 300px;">
              <Option v-for="item in roundUpList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
          </Row>
          </br>
          <Row type="flex" align="middle">
            <Col span="8">进位数:</Col>
            <Col span="14">
            <Input v-model="formDatas.roundDigit" style="width: 300px;" placeholder="请输入"></Input>
            </Col>
          </Row>
          </br>
          <Row type="flex" align="middle">
            <Col span="12" style="text-align:center"><Button type="primary" @click="cancel()">取消</Button></Col>
            <Col span="12" style="text-align:center">
            <Button type="primary"  @click="hold()">保存</Button>
            </Col>
          </Row>
        </div>
      </div>
    </Modal>
    <div class="page-box">
      <Page :total="totalNumber" size="small" :current="currentPage" :page-size="pageSize" show-total @on-change="pageIndexChange"></Page>
    </div>

  </Card>
</template>

<script>
export default {
  data () {
    return {
      turnOut: false,
      mask: false,
      submit: '',
      formDatas: {
        organization: '100',
        description: '',
        amortCode: '',
        amortName: '',
        roundUp: 0,
        roundDigit: '',
        status: ''
      },
      tmpFormDatas: {
        organization: '100',
        description: '',
        amortCode: '',
        amortName: '',
        roundUp: 0,
        roundDigit: '',
        status: ''
      },
      orgList: [
        {
          value: '100',
          label: '消费金融'
        }
      ],

      amortCodeList: [
        {
          value: '800001',
          label: '按月结息,到期还本'
        },
        {
          value: '800002',
          label: '按季结息,到期还本'
        },
        {
          value: '800007',
          label: '利随本清'
        },
        {
          value: '800004',
          label: '按月等额本息'
        },
        {
          value: '800005',
          label: '按月等额本金'
        },
        {
          value: '800006',
          label: '分期付款'
        },
        {
          value: '800009',
          label: '随借随还'
        }
      ],

      roundUpList: [
        {
          value: 1,
          label: '四舍五入'
        },
        {
          value: 2,
          label: '进位'
        },
        {
          value: 3,
          label: '截位'
        }
      ],

      path: this.$route.path,

      totalNumber: 0, // 总记录数

      currentPage: 1, // 当前页码

      pageSize: 10, // 页大小

      amortCode: '', // 还款计算方式

      paymentData: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '800001',
          label: '按月结息,到期还本'
        },
        {
          value: '800002',
          label: '按季结息,到期还本'
        },
        {
          value: '800007',
          label: '利随本清'
        },
        {
          value: '800004',
          label: '按月等额本息'
        },
        {
          value: '800005',
          label: '按月等额本金'
        },
        {
          value: '800006',
          label: '分期付款'
        },
        {
          value: '800009',
          label: '随借随还'
        }
      ],

      columns1: [
        {
          title: 'ID',
          align: 'center',
          key: 'amortId',
          width: 100,
          type: 'index'
          // render: (h, params) => {
          //   var vm = this
          //   return h('div', [
          //     h('a', {
          //       style: {
          //         textDecoration: 'underline'
          //       },
          //       on: {
          //         click: function () {
          //           vm.$router.push({
          //             path: vm.path + '/editor',
          //             query: {
          //               index: params.row.amortId,
          //               type: 2
          //             }
          //           })
          //         }
          //       }
          //     }, params.row.amortId)
          //   ])
          // }
        },

        {
          title: '还款计算方式',
          align: 'center',
          key: 'amortCode',
          render: function (h, param) {
            const amortCode = param.row.amortCode
            switch (amortCode) {
              case '800001':
                return h('div', '按月结息,到期还本')
              case '800002':
                return h('div', '按季结息,到期还本')
              case '800007':
                return h('div', '利随本清')
              case '800004':
                return h('div', '按月等额本息')
              case '800005':
                return h('div', '按月等额本金')
              case '800006':
                return h('div', '分期付款')
              case '800009':
                return h('div', '随借随还')
              default:
                return h('div', '')
            }
          }
          // render: (h, params) => {
          //   var vm = this
          //   const amortCode = params.row.amortCode
          //   var amortName = ''
          //   for (var i = 0; i < vm.amortCodeList.length; i++) {
          //     if (vm.amortCodeList[i].value === amortCode) {
          //       amortName = vm.amortCodeList[i].label
          //       break
          //     }
          //   }
          //   return h('div', [
          //     vm.submit !== params.row.amortId &&
          //       h(
          //         'div',
          //         {
          //           props: {
          //             value: vm.data1[params.index].amortCode
          //           }
          //         },
          //         amortName
          //       ),
          //     vm.submit === params.row.amortId &&
          //       h(
          //         'Select',
          //         {
          //           props: {
          //             value: vm.data1[params.index].amortCode
          //           },
          //           on: {
          //             'on-change': value => {
          //               vm.templateData1[params.index].amortCode =
          //                 value
          //             }
          //           }
          //         },
          //         this.amortCodeList.map(function (type) {
          //           return h(
          //             'Option',
          //             {
          //               props: { value: type.value + '' }
          //             },
          //             type.label
          //           )
          //         })
          //       )
          //   ])
          // }
        },
        {
          title: '进位方法',
          align: 'center',
          key: 'roundUp',
          render: (h, params) => {
            var vm = this
            const roundUp = params.row.roundUp
            var roundUpName = ''
            for (var i = 0; i < vm.roundUpList.length; i++) {
              if (vm.roundUpList[i].value === roundUp) {
                roundUpName = vm.roundUpList[i].label
                break
              }
            }
            return h('div', [
              vm.submit !== params.row.amortId &&
                h(
                  'div',
                  {
                    props: {
                      value: vm.data1[params.index].roundUp
                    }
                  },
                  roundUpName
                ),
              vm.submit === params.row.amortId &&
                h(
                  'Select',
                  {
                    props: {
                      value: vm.data1[params.index].roundUp
                    },
                    on: {
                      'on-change': value => {
                        vm.templateData1[params.index].roundUp =
                          value
                      }
                    }
                  },
                  this.roundUpList.map(function (type) {
                    return h(
                      'Option',
                      {
                        props: { value: type.value }
                      },
                      type.label
                    )
                  })
                )
            ])
          }
        },
        {
          title: '描述',
          key: 'description',
          align: 'center',
          render: (h, params) => {
            var vm = this

            return h('div', [
              vm.submit !== params.row.amortId &&
                h(
                  'div',
                  {
                    props: {
                      value: vm.data1[params.index].description
                    }
                  },
                  vm.data1[params.index].description
                ),
              vm.submit === params.row.amortId &&
                h('Input', {
                  props: {
                    value: vm.data1[params.index].description
                  },
                  on: {
                    'on-change': e => {
                      vm.templateData1[params.index].description =
                        (e.target.value + '').trim()
                    }
                  }
                })
            ])
          }
        },
        {
          title: '进位数',
          align: 'center',
          key: 'roundDigit',
          render: (h, params) => {
            var vm = this

            return h('div', [
              vm.submit !== params.row.amortId &&
                h(
                  'div',
                  {
                    props: {
                      value: vm.data1[params.index].roundDigit
                    }
                  },
                  vm.data1[params.index].roundDigit
                ),
              vm.submit === params.row.amortId &&
                h('Input', {
                  props: {
                    value: vm.data1[params.index].roundDigit
                  },
                  on: {
                    'on-change': e => {
                      vm.templateData1[params.index].roundDigit =
                        (e.target.value + '').trim()
                    }
                  }
                })
            ])
          }
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: function (h, param) {
            const amortCode = param.row.status
            switch (amortCode) {
              case 0:
                return h('div', '使用中')
              case 1:
                return h('div', '拒绝')
              case 9:
                return h('div', '待审核')
              case 10:
                return h('div', '停用')
              default:
                return h('div', '')
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          width: 300,
          render: function (h, param) {
            const vm = this
            var id = param.row.amortId
            return h('div', {}, [
              (param.row.status === 9 || param.row.status === 1) &&
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      fontSize: '12px',
                      marginLeft: '5px'
                    },
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '还款计算方式',

                          content: '审核通过?',

                          okText: '确定',

                          cancelText: '取消',
                          onOk: () => {
                            var params = {
                              amortId: param.row.amortId,
                              amortCode: param.row.amortCode,
                              status: 0,
                              approveFlag: 'Y'
                            }
                            vm.$ajax
                              .post(
                                vm.$appContext.marvels_core_product +
                                  '/product/param/amortmethod/service/updateStatus',
                                params
                              )
                              .then(re => {
                                var data = re.data
                                var code = data.code
                                if (code === 'success') {
                                  param.row.status = 0
                                } else {
                                  this.$Message.warning(data.data)
                                }
                              })
                              .catch(er => {})
                          }
                        })
                      }
                    }
                  },
                  '通过'
                ),
              param.row.status === 9 &&
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      fontSize: '12px',
                      marginLeft: '5px'
                    },
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '还款计算方式',

                          content: '审核拒绝?',

                          okText: '确定',

                          cancelText: '取消',
                          onOk: () => {
                            var params = {
                              amortId: param.row.amortId,
                              status: 1,
                              approveFlag: 'Y'
                            }

                            vm.$ajax
                              .post(
                                vm.$appContext.marvels_core_product +
                                  '/product/param/amortmethod/service/updateStatus',
                                params
                              )
                              .then(re => {
                                var data = re.data
                                var code = data.code
                                if (code === 'success') {
                                  param.row.status = 1
                                } else {
                                  this.$Message.warning(data.data)
                                }
                              })
                              .catch(er => {})
                          }
                        })
                      }
                    }
                  },
                  ' 拒绝'
                ),
              param.row.status === 10 &&
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      fontSize: '12px',
                      marginLeft: '5px'
                    },
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '还款计算方式',

                          content: '使用?',

                          okText: '确定',

                          cancelText: '取消',
                          onOk: () => {
                            var params = {
                              amortId: param.row.amortId,
                              amortCode: param.row.amortCode,
                              status: 0
                            }
                            vm.$ajax
                              .post(
                                vm.$appContext.marvels_core_product +
                                  '/product/param/amortmethod/service/updateStatus',
                                params
                              )
                              .then(re => {
                                var data = re.data
                                var code = data.code
                                if (code === 'success') {
                                  param.row.status = 0
                                } else {
                                  this.$Message.warning(data.data)
                                }
                              })
                              .catch(er => {})
                          }
                        })
                      }
                    }
                  },
                  '使用'
                ),
              param.row.status === 0 &&
                h(
                  'Button',
                  {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      fontSize: '12px',
                      marginLeft: '5px'
                    },
                    on: {
                      click: () => {
                        this.$Modal.confirm({
                          title: '还款计算方式',

                          content: '停用?',

                          okText: '确定',

                          cancelText: '取消',
                          onOk: () => {
                            var params = {
                              amortId: param.row.amortId,
                              amortCode: param.row.amortCode,
                              status: 10
                            }
                            vm.$ajax
                              .post(
                                vm.$appContext.marvels_core_product +
                                  '/product/param/amortmethod/service/updateStatus',
                                params
                              )
                              .then(re => {
                                var data = re.data
                                var code = data.code
                                if (code === 'success') {
                                  param.row.status = 10
                                } else {
                                  this.$Message.warning(data.data)
                                }
                              })
                              .catch(er => {})
                          }
                        })
                      }
                    }
                  },
                  '停用'
                ),
              (vm.submit !== id || vm.submit === '') &&
                h(
                  'Button',
                  {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      fontSize: '12px',
                      marginLeft: '5px'
                    },
                    on: {
                      click () {
                        sessionStorage.setItem('hkjh', param.row.amortId)
                        vm.submit = param.row.amortId
                        vm.templateData1 = JSON.parse(JSON.stringify(vm.data1))
                        // vm.$router.push({
                        //   path: vm.path + "/editor",
                        //   query: {
                        //     index: param.row.amortId,
                        //     type: 1
                        //   }
                        // });
                      }
                    }
                  },
                  '编辑'
                ),
              vm.submit === id &&
                h(
                  'Button',
                  {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      fontSize: '12px',
                      marginLeft: '5px'
                    },
                    on: {
                      click () {
                        var params = vm.templateData1[param.index]
                        var judge = vm.identity(params)
                        // console.log(params)
                        if (judge) {
                          return
                        }
                        sessionStorage.setItem('hkjh', '')
                        vm.submit = ''

                        vm.$ajax
                          .post(
                            vm.$appContext.marvels_core_product +
                              '/product/param/amortmethod/service/update',
                            params
                          )
                          .then(re => {
                            var tmp = JSON.parse(
                              JSON.stringify(vm.templateData1)
                            )
                            var data = re.data
                            var code = data.code
                            if (code === 'success') {
                              vm.$Message.success('成功')
                            } else {
                              vm.$Message.warning(data.data)
                            }
                            vm.data1 = tmp
                          })
                          .catch(er => {})
                        // vm.$router.push({
                        //   path: vm.path + "/editor",
                        //   query: {
                        //     index: param.row.amortId,
                        //     type: 1
                        //   }
                        // });
                      }
                    }
                  },
                  '保存'
                ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    click () {
                      vm.$Modal.confirm({
                        title: '还款计算方式',

                        content: '确定删除?',

                        okText: '确定',

                        cancelText: '取消',
                        onOk: () => {
                          var params = {
                            amortId: param.row.amortId
                          }
                          vm.$ajax
                            .post(
                              vm.$appContext.marvels_core_product +
                            '/product/param/amortmethod/service/delete',
                              params
                            )
                            .then(re => {
                              var data = re.data
                              var code = data.code
                              var message = data.message
                              if (code === 'success') {
                                vm.$Message.success(message)
                              } else {
                                vm.$Message.warning(data.data)
                              }
                              vm.queryPage()
                            })
                        }
                      })
                    }
                  }
                },
                '删除'
              )
            ])
          }.bind(this)
        }
      ],

      data1: [],
      templateData1: []
    }
  },

  methods: {
    pageIndexChange (pageIndex) {
      this.currentPage = pageIndex
      this.queryPage()
    },
    identity (params) {
      var reg = /^[-+]?\d+$/
      if (params.roundDigit === null || params.roundDigit === '') {
        this.$Message.warning('进位数不能为空')
        return true
      }
      if (!reg.test((params.roundDigit + '').trim())) {
        this.$Message.warning('请输入数字')
        return true
      }
      if (params.description !== null && params.description.length > 15) {
        this.$Message.warning('描述输入过长')
        return true
      }
      if (params.roundDigit.length > 3) {
        this.$Message.warning('进位数输入过长')
        return true
      }

      return false
    },
    initPage () {
      this.queryPage()
    },

    queryPage () {
      const vm = this
      var params = {
        currentPage: vm.currentPage,
        pageSize: vm.pageSize,
        amortCode: vm.amortCode
      }
      vm.$ajax
        .post(
          vm.$appContext.marvels_core_product +
            '/product/param/amortmethod/service/list',
          params
        )
        .then(re => {
          var data = re.data
          var code = data.code
          var message = data.message
          if (code !== 'success') {
            this.$Message.warning(message)
            return
          }
          vm.data1 = re.data.data.list
          vm.totalNumber = re.data.data.total
          vm.templateData1 = JSON.parse(JSON.stringify(vm.data1))
        })
        .catch(er => {})
    },
    hold () {
      // 保存
      var vm = this
      var amortCode = vm.formDatas.amortCode
      for (var i = 0; i < vm.amortCodeList.length; i++) {
        if (amortCode === vm.amortCodeList[i].value) {
          vm.formDatas.amortName = vm.amortCodeList[i].label
          break
        }
      }
      var params = vm.formDatas
      var judge = vm.identity(params)
      if (judge) {
        return
      }
      this.$ajax
        .post(
          vm.$appContext.marvels_core_product +
            '/product/param/amortmethod/service/save',
          params
        )
        .then(re => {
          var data = re.data
          var code = data.code
          var message = data.message
          if (code !== 'success') {
            this.$Message.error(message)
            return
          }
          vm.formDatas = JSON.parse(JSON.stringify(vm.tmpFormDatas))
          vm.turnOut = false
          this.queryPage()
        })
        .catch(er => {})
    },
    cancel () {
      var vm = this
      vm.turnOut = false
    },
    // 新建
    addItem () {
      // this.$router.push({
      //   name: "amort-option-editor",
      //   query: {
      //     type: 0
      //   }
      // });
      this.turnOut = true
    }
  },

  created () {
    var vm = this
    var state = sessionStorage.getItem('hkjh')
    vm.submit = state
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.initPage()
  }
}
</script>

<style lang="less">
@import "../../../styles/common.less";
@import "../../../styles/table.less";
.ivu-modal-body{
  padding:26px;
}
</style>
